import styles from "./index.module.scss";
import { Pagination, Tooltip } from "antd";
import { useDispatch, useSelector } from "react-redux";
import closeBtn from "@/assets/public/close-btn.png";
import closeBtnLight from "@/assets/public/close-btn-light.png";
import searchBtn from "@/assets/public/icon-search.png";
import searchBtnLight from "@/assets/public/icon-search-light.png";
import { setLayersLevel2 } from "@/store";

export default function Model(props) {
  const dispatch = useDispatch();
  const { name } = props;
  const layers = useSelector((state) => {
    return state.layersLevel2;
  });
  const theme = useSelector((state) => state.theme);
  const handleClose = () => {
    dispatch(
      setLayersLevel2({
        query: {},
        name: "",
        other: {},
      })
    );
  };

  const getValue = (value) => {
    console.log(value);
  };
  return (
    <div className={styles.model}>
      <header className={styles.header}>
        {theme ? (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtnLight}
            alt="加载中..."
          />
        ) : (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtn}
            alt="加载中..."
          />
        )}
        <span className={styles.title}>{name}</span>
      </header>
      <div className={styles.detail}>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>二级项目编号</div>
          <div className={styles.detailContent}>
            <span
              className="text-overflow"
              title="454564564564564564654564545645645645645646545645456456456456456465456"
            >
              454564564564564564654564545645645645645646545645456456456456456465456
            </span>
          </div>
          <div className={styles.detailName}>二级项目名称</div>
          <div className={styles.detailContent}>
            <span
              className="text-overflow"
              title="某某二级项目某某二级项目某某二级项目某某二级项目某某二级项目某某二级项目"
            >
              某某二级项目某某二级项目某某二级项目某某二级项目某某二级项目某某二级项目
            </span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>二级项目经理</div>
          <div className={styles.detailContent}>
            <span className="text-overflow">张光荣(zgr1473)</span>
          </div>
          <div className={styles.detailName}>二级项目负责人</div>
          <div className={styles.detailContent}>
            <span className="text-overflow">唐化国(thg1474)</span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>预估成本</div>
          <div className={styles.detailContent}>
            <span className="text-overflow">55532</span>
          </div>
          <div className={styles.detailName}>实际成本</div>
          <div className={styles.detailContent}>
            <span className="text-overflow">95959</span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>项目人员平均成本</div>
          <div className={styles.detailContent}>
            <span className="text-overflow">55532</span>
          </div>
          <div className={styles.detailName}>项目人数</div>
          <div className={styles.detailContent}>
            <span className="text-overflow">95959</span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>项目人员平均产值</div>
          <div className={styles.detailContent}>
            <span className="text-overflow">55532</span>
          </div>
          <div className={styles.detailName}></div>
          <div className={styles.detailContent}>
            <span className="text-overflow"></span>
          </div>
        </div>
      </div>

      <div className={styles.inputContainer}>
        <input className={styles.input} type="text" placeholder="请输入姓名" />
        <div className={styles.searchBtn}>
          <span>搜索</span>
          {theme ? (
            <img
              className={styles.searchBtnImg}
              src={searchBtnLight}
              alt="加载中..."
            />
          ) : (
            <img
              className={styles.searchBtnImg}
              src={searchBtn}
              alt="加载中..."
            />
          )}
        </div>
      </div>
      <div className={styles.searchBox}>
        <div className={styles.listHeader}>
          <div className={styles.listItem}>人员名称</div>
          <div className={styles.listItem}>岗位</div>
          <div className={styles.listItem}>一级部门</div>
          <div className={styles.listItem}>二级部门</div>
          <div className={styles.listItem}>三级部门</div>
          <div className={styles.listItem}>出勤天数</div>
        </div>
        {[1, 2, 3, 4, 5, 6, 7, 8].map((item) => {
          return (
            <div className={styles.list} key={item}>
              <div className={styles.listItem}>
                <span className="text-overflow">张三</span>
              </div>
              <div className={styles.listItem}>
                <span className="text-overflow">岗位</span>
              </div>
              <div className={styles.listItem}>
                <span className="text-overflow">HW</span>
              </div>
              <div className={styles.listItem}>
                <span className="text-overflow">二级部门</span>
              </div>
              <div className={styles.listItem}>
                <span className="text-overflow">三级部门</span>
              </div>
              <div className={styles.listItem}>
                <span className="text-overflow">21</span>
              </div>
            </div>
          );
        })}
      </div>
      <div className={styles.pagination}>
        <Pagination
          total={805}
          showTotal={(total) => `共 ${total} 条`}
          defaultPageSize={20}
          defaultCurrent={1}
        />
      </div>
    </div>
  );
}
